import React from 'react';
import {
    Row,
    Col,
    Table,
    Icon,
    InputNumber,
    Menu,
    Dropdown,
    Button,
    Modal,
    notification,
    Form,
    Tooltip,
    Switch,
    AutoComplete,
    Transfer,
    Spin,
} from 'antd';
import axios from 'axios';
import intercept from '../../../utils/intercept';
import { config } from 'utils';
import { Input } from 'antd';
import { Link } from 'dva/router';
import '../less/common.less';
import '../less/CustomLine.less';
const Search = Input.Search;
const FormItem = Form.Item;
const { TextArea } = Input;
const Option = AutoComplete.Option;

class CustomLineInfoClass extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            loading: false,
            pagination: {
                current: 1,
                pagesize: 10
            },
            onChange: this.onChange,
            buslineVisible: false,
            isDisplay: 'none',
            isDisplayFixSeatNum: 'block',
            isEnable: false,
            isWater: false,
            formTitle: '编辑线路信息',
            formStartCity: '郑州市',
            formEndCity: '郑州市',
            driverOrCarData: [],
            driverOrCaKeys: [],
            driverOrCarVisible: false,
            driverOrCarTitle: "",
            formBusLineId: -1,
            editType: "",
            userOrgans: [],
            allOrgans: [],
            organNameValid: "",
            desOrganNameValid: "",
        }
    };

    componentDidMount() {
        this.getBusLineInfo();
        this.getUserOrgans();
    };

    onChange = (pagination, filters, sorter) => {
        this.getBusLineInfo({
            sortField: sorter.field,
            sortOrder: sorter.order,
            page: pagination.current,
            ...filters
        });
    };

    openNotification = (title, desc, color) => {
        notification.open({
            message: title,
            description: desc,
            icon: <Icon type="smile-circle" style={{ color: color }} />,
        });
    };

    getBusLineInfo = (params = {}) => {
        const token = sessionStorage.getItem("token");
        this.setState({ loading: true });
        var keyword = typeof (params.keyword) === "undefined"
            ? ''
            : params.keyword;
        axios
            .get(`${config.api}CustomLine/CustomBusLine?Page=${params.page}&&PageSize=${this.state.pagination.pageSize}&&keyword=${keyword}`, { headers: { Authorization: 'Bearer ' + token } })
            .then((data) => {
                const pagination = {
                    ...this.state.pagination
                };
                pagination.total = data.data.pageList.totalRows;
                pagination.current = params.page;
                this.setState({ loading: false, dataSource: data.data.pageList.collections, pagination });
            })
            .catch(err => {
                intercept;
            })
    };

    organNameValid = (rule, value, callback) => {
        let tem = this.state.userOrgans.filter(m => m.props.value == value);
        if (tem.length > 0) {
            this.setState({
                organNameValid: 'success',
            })
        }
        else {
            this.setState({
                organNameValid: 'error',
            })
        }

        callback();
    }

    desOrganNameValid = (rule, value, callback) => {
        let tem = this.state.allOrgans.filter(m => m.props.value == value);
        if (tem.length > 0) {
            this.setState({
                desOrganNameValid: 'success',
            })
        }
        else {
            this.setState({
                desOrganNameValid: 'error',
            })
        }

        callback();
    }

    getUserOrgans = () => {
        const token = sessionStorage.getItem("token");
        axios
            .get(`${config.api}User/GetOrgansKey`, {
                headers: {
                    Authorization: 'Bearer ' + token
                }
            })
            .then((res) => {
                let tmp = res
                    .data
                    .userOrgans
                    .map(m => (
                        <Option key={m.key} value={m.label}>
                            {m.label}
                        </Option>
                    ));

                let all = res
                    .data
                    .allOrgans
                    .map(m => (
                        <Option key={m.key} value={m.label}>
                            {m.label}
                        </Option>
                    ));
                this.setState({ userOrgans: tmp, allOrgans: all });
            }).catch(err => {
                intercept;
            });
    }

    search(value) {
        this.getBusLineInfo({ keyword: value });
    }

    Menu = (record) => {
        return (
            record.isWater ?
                <Menu>
                    <Menu.Item key="1"><a className="menuItem" rel="noopener noreferrer" onClick={(ev, data) => { this.EditBusLine(ev, record) }}>线路</a></Menu.Item>
                    <Menu.Item key="2"><Link className="menuItem" rel="noopener noreferrer" to={`/customLineInfo/customTakePoint?busLineId=${record.busLineId}`}>站点</Link></Menu.Item>
                    <Menu.Item key="3"><a className="menuItem" rel="noopener noreferrer" onClick={(ev, busLineId, type) => { this.EditLine(ev, record, 3) }}>司机</a></Menu.Item>
                    <Menu.Item key="4"><a className="menuItem" rel="noopener noreferrer" onClick={(ev, busLineId, type) => { this.EditLine(ev, record, 4) }}>车辆</a></Menu.Item>
                </Menu>
                :
                <Menu>
                    <Menu.Item key="1"><a className="menuItem" rel="noopener noreferrer" onClick={(ev, data) => { this.EditBusLine(ev, record) }}>线路</a></Menu.Item>
                    <Menu.Item key="2"><Link className="menuItem" rel="noopener noreferrer" to={`/customLineInfo/customTakePoint?busLineId=${record.busLineId}`}>站点</Link></Menu.Item>
                    <Menu.Item key="3"><a className="menuItem" rel="noopener noreferrer" onClick={(ev, busLineId, type) => { this.EditLine(ev, record, 3) }}>司机</a></Menu.Item>
                    <Menu.Item key="4"><a className="menuItem" rel="noopener noreferrer" onClick={(ev, busLineId, type) => { this.EditLine(ev, record, 4) }}>车辆</a></Menu.Item>
                    <Menu.Item key="5"><Link className="menuItem" rel="noopener noreferrer" to={`/customLineInfo/customBusLineStartTime?busLineId=${record.busLineId}`}>发车配置</Link></Menu.Item>
                </Menu>
        )
    }

    cityMenu = (value) => {
        return (
            <Menu onClick={(item, data) => this.switchCity(item, value)}>
                <Menu.Item key="郑州市"><span>郑州市</span></Menu.Item>
                <Menu.Item key="开封市"><span>开封市</span></Menu.Item>
                <Menu.Item key="平顶山市"><span>平顶山市</span></Menu.Item>
                <Menu.Item key="洛阳市"><span>洛阳市</span></Menu.Item>
                <Menu.Item key="商丘市 "><span>商丘市</span></Menu.Item>
                <Menu.Item key="安阳市"><span>安阳市</span></Menu.Item>
                <Menu.Item key="新乡市"><span>新乡市</span></Menu.Item>
                <Menu.Item key="鹤壁市"><span>鹤壁市</span></Menu.Item>
                <Menu.Item key="焦作市"><span>焦作市</span></Menu.Item>
                <Menu.Item key="濮阳市"><span>濮阳市</span></Menu.Item>
                <Menu.Item key="漯河市"><span>漯河市</span></Menu.Item>
                <Menu.Item key="三门峡市"><span>三门峡市</span></Menu.Item>
                <Menu.Item key="周口市"><span>周口市</span></Menu.Item>
                <Menu.Item key="驻马店市"><span>驻马店市</span></Menu.Item>
                <Menu.Item key="南阳市"><span>南阳市</span></Menu.Item>
                <Menu.Item key="信阳市"><span>信阳市</span></Menu.Item>
                <Menu.Item key="济源市"><span>济源市</span></Menu.Item>
                <Menu.Item key="许昌市"><span>许昌市</span></Menu.Item>
            </Menu>
        )
    }

    switchCity = (item, value) => {
        if (value == "1") {
            this.setState({
                formStartCity: item.key,
            })
        }
        else {
            this.setState({
                formEndCity: item.key,
            })
        }
    }

    handleReset = () => {
        this
            .props
            .form
            .resetFields();
        this.setState({
            organNameValid: '',
            desOrganNameValid: '',
        })
    }

    handleCancel = () => {
        this.setState({
            buslineVisible: false,
            driverOrCarVisible: false,
        })
    }

    EditLine = (ev, record, type) => {
        this.setState({
            driverOrCarData: [],
            driverOrCarKeys: [],
        })
        if (type == 3 || type == 4) {
            if (type == 3) {
                this.getBusLineDrivers(record.busLineId);
                this.setState({
                    editType: "driver",
                })
            }
            else if (type == 4) {
                this.getBusLineCars(record.busLineId);
                this.setState({
                    editType: "car",
                })
            }
            this.setState({
                driverOrCarVisible: true,
                driverOrCarTitle: type == 3 ? `（${record.busLineName}）  选择司机` : (type == 4 ? `（${record.busLineName}）  选择车辆` : ""),
            })
        }
    }

    onSwitchChange = (checked, type) => {
        if (type == 1) {
            this.setState({
                isWater: !checked,
                isDisplay: checked ? 'none' : 'block',
                isDisplayFixSeatNum: checked ? 'block' : 'none',
            });
        } else {
            this.setState({
                isEnable: !checked
            });
        }
    }

    switchChange = (checked, record) => {
        this.setState({ loading: true });
        const token = sessionStorage.getItem("token");
        let dataSource = this.state.dataSource;
        for (let i = 0; i < dataSource.length; i++) {
            if (dataSource[i].busLineId == record.busLineId) {
                dataSource[i].isEnable = checked;
            }
        }

        axios
            .post(`${config.api}CustomLine/CustomEditBusLine`, { IsEditEnable: true, IsEnable: checked, BusLineID: record.busLineId }, { headers: { Authorization: 'Bearer ' + token } })
            .then((data) => {
                if (data.data.result) {
                    this.openNotification("状态修改", checked ? "开启成功" : "关闭成功", "#108ee9");
                }
                else {
                    this.openNotification("状态修改", data.data.errorMessage, "red");
                    for (let i = 0; i < dataSource.length; i++) {
                        if (dataSource[i].busLineId == record.busLineId) {
                            dataSource[i].isEnable = !checked;
                        }
                    }
                }
                this.setState({ loading: false });
            }).catch(err => {
                intercept;
            });
        this.setState({
            dataSource
        });
    }

    EditBusLine = (ev, record) => {
        this.props.form
            .setFieldsValue({
                BusLineID: record.busLineId,
                BusLineName: record.busLineName,
                StartCity: record.startCity,
                StartPlace: record.startPlace,
                EndCity: record.endCity,
                EndPlace: record.endPlace,
                Price: record.price,
                LineDescription: record.lineDescription,
                OrganName: record.organName,
                //IsEnable : record.isEnable,
                //EndStationCode: record.bak1,
                //IsWater : record.isWater,
                DestinationOrganName: record.destinationOrganName,
                PreSalePeriod: record.preSaleDays,
                WaterStartTime: record.isWater ? record.waterStartTime : "00:00",
                WaterEndTime: record.isWater ? record.waterEndTime : "00:00",
                SeatAmount: record.fixSeatNumber,
            });
        this.setState({
            isDisplay: record.isWater ? 'block' : 'none',
            isDisplayFixSeatNum: record.isWater ? 'none' : 'block',
            isWater: record.isWater == null ? false : record.isWater ? true : false,
            isEnable: record.isEnable,
            buslineVisible: true,
            formTitle: '编辑线路信息',
            formStartCity: record.startCity,
            formEndCity: record.endCity,
            organNameValid: '',
            desOrganNameValid: '',
        });
    }

    AddBusLine = () => {
        this.handleReset();
        this.setState({
            buslineVisible: true,
            isEnable: false,
            isWater: false,
            formTitle: '新增线路',
            formStartCity: "郑州市",
            formEndCity: "郑州市",
        });
        this.props.form
            .setFieldsValue({
                BusLineID: -1,
            });
    }

    EditBusLineInfo = (e) => {
        e.preventDefault();
        let isWater = this.state.isWater;
        let seatAmount = this.props.form.getFieldValue('SeatAmount');
        let busLineId = this.props.form.getFieldValue('BusLineID');
        if ((seatAmount == null || seatAmount < 0) && isWater) {
            this.props.form.setFieldsValue({ SeatAmount: 0 })
        }
        this
            .props
            .form
            .validateFieldsAndScroll((err, values) => {
                if (!err) {
                    this.setState({ loading: true });
                    const token = sessionStorage.getItem("token");
                    let isAdd = false;
                    if (busLineId < 0) {
                        isAdd = true;
                    }
                    let postdata = {
                        IsAdd: isAdd,
                        IsEditEnable: false,
                        busLineID: values.BusLineID,
                        busLineName: values.BusLineName,
                        startCity: this.state.formStartCity,
                        startPlace: values.StartPlace,
                        endCity: this.state.formEndCity,
                        endPlace: values.EndPlace,
                        price: values.Price,
                        lineDescription: values.LineDescription,
                        organName: values.OrganName,
                        isEnable: this.state.isEnable,
                        DestinationOrganName: values.DestinationOrganName,
                        isWater: this.state.isWater,
                        preSaleDays: values.PreSalePeriod,
                        waterStartTime: values.WaterStartTime,
                        waterEndTime: values.WaterEndTime,
                        fixSeatNumber: values.SeatAmount
                    }
                    axios
                        .post(`${config.api}CustomLine/CustomEditBusLine`, postdata, {
                            headers: {
                                Authorization: 'Bearer ' + token
                            }
                        })
                        .then((data) => {
                            if (data.data.result) {
                                //this.openNotification("编辑线路", "修改线路信息成功", "#108ee9");
                                this.setState({ buslineVisible: false });
                                this
                                    .props
                                    .form
                                    .resetFields();

                                let dataSource = this.state.dataSource;
                                let response = dataSource.filter(m => m.busLineId == data.data.busLineInfo.busLineId);
                                //新增
                                if (response.length <= 0) {
                                    dataSource.unshift(data.data.busLineInfo);
                                    this.openNotification("添加线路", "添加线路成功", "#108ee9");
                                }
                                //编辑
                                else {
                                    for (let i = 0; i < dataSource.length; i++) {
                                        if (dataSource[i].busLineId == data.data.busLineInfo.busLineId) {
                                            dataSource[i] = data.data.busLineInfo;
                                        }
                                    }
                                    this.openNotification("编辑线路", "修改线路信息成功", "#108ee9");
                                }
                                this.setState({
                                    dataSource,
                                });
                            } else {
                                this.openNotification("编辑线路", data.data.errorMessage, "red");
                            }
                            this.setState({ loading: false });
                        }).catch(err => {
                            intercept;
                        })
                }
            });
    }

    getBusLineDrivers = (data) => {
        this.setState({
            loading: true,
        })
        const token = sessionStorage.getItem("token");
        const driverOrCarData = [];
        const driverOrCarKeys = [];
        axios
            .get(`${config.api}CustomLine/CustomBusLineDriver?busLineId=${data}`, {
                headers: {
                    Authorization: 'Bearer ' + token
                }
            })
            .then((res) => {
                res.data.drivers.forEach(element => {
                    const data = {
                        key: element.driverId,
                        title: element.driverName,
                        description: element.driverName,
                        chosen: element.isSelected,
                    }
                    if (data.chosen) {
                        driverOrCarKeys.push(data.key)
                    }
                    driverOrCarData.push(data)
                });
                this.setState({
                    driverOrCarData,
                    driverOrCarKeys,
                    formBusLineId: data,
                    loading: false,
                })
            }).catch(err => {
                intercept;
            });
    }

    getBusLineCars = (data) => {
        this.setState({
            loading: true,
        })
        const token = sessionStorage.getItem("token");
        const driverOrCarData = [];
        const driverOrCarKeys = [];
        axios
            .get(`${config.api}CustomLine/CustomBusLineCar?busLineId=${data}`, {
                headers: {
                    Authorization: 'Bearer ' + token
                }
            })
            .then((res) => {
                res.data.cars.forEach(element => {
                    const data = {
                        key: element.carId,
                        title: element.plateNumber,
                        description: element.plateNumber,
                        chosen: element.isSelected,
                    }
                    if (data.chosen) {
                        driverOrCarKeys.push(data.key)
                    }
                    driverOrCarData.push(data)
                });
                this.setState({
                    driverOrCarData,
                    driverOrCarKeys,
                    formBusLineId: data,
                    loading: false,
                })
            }).catch(err => {
                intercept;
            });
    }

    filterOption = (inputValue, option) => {
        return option.description.indexOf(inputValue) > -1;
    }

    EditBuslineDriverOrCar = (targetKeys, direction, moveKeys) => {
        this.setState({
            loading: true,
        })
        this.setState({ driverOrCarKeys: targetKeys });

        const token = sessionStorage.getItem("token");

        if (this.state.editType == "driver") {
            let driverIds = "";
            moveKeys.forEach(element => {
                driverIds += element + "_";
            });
            const postdata = {
                busLineId: this.state.formBusLineId,
                driverIdStr: driverIds,
                isAdd: direction == "right" ? true : false,
            }
            axios
                .post(`${config.api}CustomLine/EditBuslineDriver`, postdata, {
                    headers: {
                        Authorization: 'Bearer ' + token
                    }
                })
                .then((res) => {
                    this.setState({
                        loading: false,
                    })
                }).catch(err => {
                    intercept;
                })
        }
        else if (this.state.editType == "car") {
            let carIds = "";
            moveKeys.forEach(element => {
                carIds += element + "_";
            });
            const postdata = {
                busLineId: this.state.formBusLineId,
                carIds: carIds,
                isAdd: direction == "right" ? true : false,
            }
            axios
                .post(`${config.api}CustomLine/EditBuslineCar`, postdata, {
                    headers: {
                        Authorization: 'Bearer ' + token
                    }
                })
                .then((res) => {
                    this.setState({
                        loading: false,
                    })
                }).catch(err => {
                    intercept;
                })
        }

    }

    render() {
        const columns = [
            {
                title: '线路名称',
                dataIndex: 'busLineName',
                width: 200
            },
            {
                title: '出发城市',
                dataIndex: 'startCity',
                width: 100
            },
            {
                title: '目的城市',
                dataIndex: 'endCity',
                width: 100
            },
            {
                title: '起点',
                dataIndex: 'startPlace',
                width: 150
            },
            {
                title: '终点',
                dataIndex: 'endPlace',
                width: 150
            },
            {
                title: '票价（元）',
                dataIndex: 'price',
                width: 100
            },
            {
                title: '线路类型',
                dataIndex: 'isWater',
                width: 100,
                render: (text, record) => {
                    return (
                        record.isWater ? '流水班' : '固定班'
                    )
                }
            },
            {
                title: '所属单位',
                dataIndex: 'organName',
                width: 160,
            },
            {
                title: '线路描述',
                dataIndex: 'lineDescription',
                width: 200
            },
            {
                title: '是否启用',
                dataIndex: 'isEnable',
                width: 100,
                render: (text, record) => {
                    return (<Switch
                        checkedChildren="开"
                        unCheckedChildren="关"
                        onChange={(checked, values) => {
                            this.switchChange(checked, record)
                        }}
                        checked={record.isEnable}
                    />)
                }
            },
            {
                title: '操作',
                key: 'operation',
                width: 100,
                render: (text, record) => {
                    return (
                        <Dropdown overlay={this.Menu(record)}>
                            <Button style={{ marginLeft: 8 }}>
                                编辑
                                <Icon type="down" />
                            </Button>
                        </Dropdown>
                    )
                }
            },
        ];

        const { getFieldDecorator } = this.props.form;
        const className = "components-table-demo-nested";
        const formItemLayout = {
            labelCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 6
                }
            },
            wrapperCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 14
                }
            }
        };

        return (
            <div>
                <Row gutter={8} style={{
                    //marginTop: '10px'
                }}>
                    <Col span={24}>
                        <div
                            style={{
                                textAlign: 'center',
                                margin: 10
                            }}>
                            <Search
                                placeholder="请输入任意查询条件"
                                style={{
                                    width: 600
                                }}
                                onSearch={value => this.search(value)} />
                            <Button type="primary" style={{ float: 'right' }} onClick={this.AddBusLine}>新增线路</Button>
                        </div>
                        <Table
                            rowKey={record => record.busLineId}
                            {...this.state}
                            bordered={true}
                            className={className}
                            columns={columns}
                            style={{ background: 'white' }}
                        />
                    </Col>
                </Row>
                <Modal
                    title={this.state.formTitle}
                    width={1000}
                    visible={this.state.buslineVisible}
                    footer={null}
                    onCancel={this.handleCancel}
                    maskClosable={false}
                >

                    <Form onSubmit={(e, type) => this.EditBusLineInfo(e)} className="ant-advanced-search-form">
                        <Row>
                            <Col span={12}><FormItem
                                style={{ display: 'none' }}
                                {...formItemLayout}
                                label={(
                                    <span>
                                        线路ID
                                <Tooltip title="自动填充">
                                            <Icon type="question-circle-o" />
                                        </Tooltip>
                                    </span>
                                )}
                                hasFeedback>
                                {getFieldDecorator('BusLineID', {
                                    rules: [
                                        {
                                            required: false,
                                        }
                                    ]
                                })(<Input />)}
                            </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(<span>线路名称
                                    <Tooltip title="自动填充">
                                            <Icon type="question-circle-o" />
                                        </Tooltip>
                                    </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('BusLineName', {
                                        rules: [
                                            {
                                                required: true,
                                                message: '请输入线路名称!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<Input />)}
                                </FormItem>

                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            线路所属单位
                                <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback
                                    validateStatus={this.state.organNameValid}>
                                    {getFieldDecorator('OrganName', {
                                        rules: [
                                            {
                                                required: true,
                                                message: '请选择线路所属单位!',
                                            },
                                            {
                                                validator: this.organNameValid,
                                            }
                                        ]
                                    })(<AutoComplete
                                        dataSource={this.state.userOrgans}
                                        filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1} />)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            出发城市
                                    <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('StartCity', {
                                        rules: [
                                            {
                                                required: false,
                                                message: '请选择出发城市!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<Dropdown overlay={this.cityMenu("1")}>
                                        <Button>
                                            <span>{this.state.formStartCity}</span>
                                            <Icon type="down" />
                                        </Button>
                                    </Dropdown>)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            目的城市
                                    <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('EndCity', {
                                        rules: [
                                            {
                                                required: false,
                                                message: '请选择目的城市!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<Dropdown overlay={this.cityMenu("2")}>
                                        <Button>
                                            <span>{this.state.formEndCity}</span>
                                            <Icon type="down" />
                                        </Button>
                                    </Dropdown>)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            目的站所属单位
                                <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback
                                    validateStatus={this.state.desOrganNameValid}
                                >
                                    {getFieldDecorator('DestinationOrganName', {
                                        rules: [
                                            {
                                                required: true,
                                                message: '请选择目的站所属单位!',
                                            },
                                            {
                                                validator: this.desOrganNameValid,
                                            }
                                        ]
                                    })(<AutoComplete
                                        dataSource={this.state.allOrgans}
                                        filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1} />)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            起点
                                    <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('StartPlace', {
                                        rules: [
                                            {
                                                required: true,
                                                message: '请选择起点!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<Input />)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            终点
                                    <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('EndPlace', {
                                        rules: [
                                            {
                                                required: true,
                                                message: '请选择终点!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<Input />)}
                                </FormItem></Col>
                            <Col span={12}><FormItem
                                {...formItemLayout}
                                label={(
                                    <span>
                                        票价
                                    <Tooltip title="自动填充">
                                            <Icon type="question-circle-o" />
                                        </Tooltip>
                                    </span>
                                )}
                                hasFeedback>
                                {getFieldDecorator('Price', {
                                    rules: [
                                        {
                                            required: true,
                                            message: '请输入票价!',
                                        }
                                    ]
                                })(<InputNumber step="0.01" />)}
                            </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            是否流水班
                                    <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {(<Switch checkedChildren="流水班"
                                        unCheckedChildren="固定班"
                                        checked={this.state.isWater}
                                        onChange={(checked, type) => {
                                            this.onSwitchChange(this.state.isWater, 1)
                                        }}
                                    />)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            是否启用
                                    <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {(<Switch checkedChildren="开启"
                                        unCheckedChildren="关闭"
                                        checked={this.state.isEnable}
                                        onChange={(checked, type) => {
                                            this.onSwitchChange(this.state.isEnable, 2)
                                        }}
                                    />)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            预售期
                                    <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('PreSalePeriod', {
                                        rules: [
                                            {
                                                required: true,
                                                message: '请输入预售期!',
                                            }
                                        ]
                                    })(<InputNumber />)}
                                </FormItem>
                                <FormItem
                                    style={{ display: this.state.isDisplayFixSeatNum }}
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            定员
                                    <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('SeatAmount', {
                                        rules: [
                                            {
                                                required: !(this.state.isWater),
                                                message: '请输入定员!',
                                            }
                                        ]
                                    })(<InputNumber />)}
                                </FormItem>
                                <FormItem
                                    style={{ display: this.state.isDisplay }}
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            流水班首班车
                                    <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('WaterStartTime', {
                                        rules: [
                                            {
                                                required: this.state.isWater,
                                                message: '请输入首班车时间!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<input type="time" />)}
                                </FormItem>
                                <FormItem
                                    style={{ display: this.state.isDisplay }}
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            流水班末班车
                                    <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('WaterEndTime', {
                                        rules: [
                                            {
                                                required: this.state.isWater,
                                                message: '请输入末班车时间!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<input type="time" />)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            线路描述
                                <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('LineDescription', {
                                        rules: [
                                            {
                                                required: false
                                            }
                                        ]
                                    })(<TextArea maxLength='200' placeholder='200个字内' />)}
                                </FormItem></Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem className="center">
                                    <Button onClick={this.handleReset}>重置</Button>{' '}
                                    <Button type="primary" htmlType="submit">确定</Button>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Modal>

                <Modal
                    title={this.state.driverOrCarTitle}
                    width={800}
                    visible={this.state.driverOrCarVisible}
                    footer={null}
                    onCancel={this.handleCancel}
                    maskClosable={false}
                    bodyStyle={{ height: "500px" }}
                >
                    <Transfer
                        dataSource={this.state.driverOrCarData}
                        showSearch
                        titles={['未关联', '已关联']}
                        searchPlaceholder="搜索"
                        filterOption={this.filterOption}
                        operations={['添加', '撤销']}
                        targetKeys={this.state.driverOrCarKeys}
                        onChange={this.EditBuslineDriverOrCar}
                        render={item => item.title}
                        notFoundContent="没有数据"
                        listStyle={{ height: "450px", width: "350px" }}
                    />
                    <div style={{ display: this.state.loading ? "block" : "none", textAlign: "center" }}>
                        <Spin /> 加载中
                    </div>
                </Modal>
            </div>
        )
    }
}
const CustomLineInfo = Form.create()(CustomLineInfoClass);
export default CustomLineInfo
